/**
 * Created by hejg on 2018/5/21.
 */
import React, {Component} from 'react';
import {
    ScrollView,
    View,
    StyleSheet,
    Text,
    TouchableOpacity
} from 'react-native';
import {observer} from 'mobx-react/native';
import Echarts from 'native-echarts';
import Ionicons from 'react-native-vector-icons/Ionicons';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import Indicator from '../../../components/Indicator';
import DropDown from '../../../components/DropDown';
import ChoseIcon from 'react-native-vector-icons/FontAwesome';
var Dimensions = require('Dimensions');
import Style from '../../../components/Style';
import Tool from '../../../components/Tool';

@observer
export default class PortionPart extends Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        let part = this.props.store;
        if (part.periodOptions.length < 1) {
            part.showIndicator();
            this._loadIndexCollect();
            this._loadOrganizeList();
        }
    }

    _loadIndexCollect() {
        let _this = this;
        let part = this.props.store;
        Tool.fetchAjax(Tool.appPath.mkst + 'indexCollect/getAllIndexCollect', '', function (data) {
            if (data.state) {
                part.setIndexOptions(data.info);
                if (data.info && data.info.length > 0) {
                    part.setParams(Object.assign({}, part.params, {indexCode: data.info[0].INDEX_CODE}));
                    _this._loadScreenData();
                }
            }
        }, function (error) {
            part.showIndicator(error);
        }, function () {

        });
    }

    _loadScreenData() {
        let _this = this;
        let part = this.props.store;
        var qr_params = "indexCode=" + part.params.indexCode +
            "&opTime=" + part.params.opTime + "&orgId=" + part.params.orgId;
        // console.warn(qr_params);
        part.showIndicator();
        Tool.fetchAjax(Tool.appPath.mkst + 'indexCollect/getQuotient', qr_params, function (data) {
            if (data.state) {
                part.setScreenData(data.info.info);
                part.setPeriodOptions(data.info.period);
                part.setLineOption(data.info.charts);
            }
        }, function (error) {
            part.showIndicator(error);
        }, function () {
            part.hiddenIndicator();
        });
    }

    _loadOrganizeList() {
        let _this = this;
        let part = this.props.store;
        Tool.fetchAjax(Tool.appPath.mkst + 'advertise/selectOrg', '', function (data) {
            if (data.state) {
                part.setOrganizeOptions(data.info);
            }
        }, function (error) {
            part.showIndicator(error);
        }, function () {

        });
    }

    _changeOrganizeItem(index) {
        let part = this.props.store;
        part.setSelectOrganize(index);
        part.setParams(Object.assign({}, part.params, {orgId: part.organizeOptions[index].value}));
        this._loadScreenData();
    }

    _changePeriodItem(index) {
        let part = this.props.store;
        part.setSelectPeriod(index);
        part.setParams(Object.assign({}, part.params, {opTime: part.periodOptions[index].value}));
        this._loadScreenData();
    }

    _changeIndexItem(index) {
        let part = this.props.store;
        part.setSelectIndex(index);
        part.setSelectPeriod(0);
        part.setParams(Object.assign({}, part.params, {opTime: '', indexCode: part.indexOptions[index].value}));
        this._loadScreenData();
    }

    render() {
        option = {
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: 10,
                right: '4%',
                bottom: '3%',
                top:10,
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : ['周一','周二','周三','周四','周五','周六','周日']
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'邮件营销',
                    type:'bar',
                    stack: '广告',
                    barWidth: 20,
                    itemStyle:{
                        normal:{
                            color:'#c0504d'
                        }
                    },
                    data:[120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name:'联盟广告',
                    type:'bar',
                    barWidth: 20,
                    stack: '广告',
                    itemStyle:{
                        normal:{
                            color:'#4bacc6'
                        }
                    },
                    data:[220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name:'视频广告',
                    type:'bar',
                    barWidth: 20,
                    stack: '广告',
                    itemStyle:{
                        normal:{
                            color:'#558ed5'
                        }
                    },
                    data:[150, 232, 201, 154, 190, 330, 410]
                }
            ]
        };
        let part = this.props.store;
        return (<View style={{flex:1}}>
                <ScrollView>
                    <View>
                        <View style={styles.ConditionView}>
                            <DropDown color={Style.color.blue}
                                      title="请选择指标"
                                      contentComponent={<ChoseIcon name={"sort"} size={18} color={Style.color.black}/>}
                                      defaultIndex={part.selectIndex}
                                      onConfirm={(index)=>this._changeIndexItem(index)}
                                      data={part.indexOptions.slice()}/>
                            <Text style={styles.ConditionIndexTitle}>{part.selectIndexTitle}</Text>
                        </View>
                        {part.screenData ? (
                                <View>
                                    <View>
                                        <View style={{backgroundColor:Style.color.white}}>
                                           {/* <Echarts option={part.pieOption} height={100}/>*/}
                                            <RadioItem title={'累计市场份额'} cmc={30} cuc={40} ctc={30} option={option}/>
                                            <RadioItem title={'同比增量份额'} cmc={30} cuc={40} ctc={30} option={option}/>
                                            <RadioItem title={'当月增量份额'} cmc={30} cuc={40} ctc={30} option={option}/>
                                        </View>
                                        <View style={styles.IndexRatioView}>
                                            <IndexRatioItem/>
                                            {/*<IndexRatioItem
                                                cmc={Tool.numberFormat(part.screenData.compareGrowthCmcc*100,2)}
                                                cuc={Tool.numberFormat(part.screenData.compareGrowthCu*100,2)}
                                                ctc={Tool.numberFormat(part.screenData.compareGrowthCt*100,2)}/>
                                            <IndexRatioItem cmc={Tool.numberFormat(part.screenData.incrementCmcc*100,2)}
                                                            cuc={Tool.numberFormat(part.screenData.incrementCu*100,2)}
                                                            ctc={Tool.numberFormat(part.screenData.incrementCt*100,2)}/>*/}
                                        </View>
                                    </View>
                                    <View style={{paddingHorizontal:10}}>
                                        <IndexHeader title="当月收入(万元)"
                                                     value={Tool.numberFormat(part.screenData.monthlyIncome,2)}
                                                     ratio={Tool.numberFormat(part.screenData.monthlyIncomeMom*100,2)}/>
                                        <View style={styles.EchartsLineView}>
                                            <View style={styles.charsTitle}>
                                                <Text>近一年趋势变化</Text>
                                            </View>
                                            <Echarts option={part.lineOption} height={180}  width={Dimensions.get('window').width}/>
                                        </View>
                                        <IndexHeader title="累计收入(万元)"
                                                     value={Tool.numberFormat(part.screenData.totleIncome,2)}
                                                     ratio={Tool.numberFormat(part.screenData.totleIncomeYoy*100,2)}/>
                                    </View>
                                </View>
                            )
                            :
                            <View style={{height:200,marginTop:10}}>
                                <Indicator isVisible={true} message={Style.tip.noData} type="none" styleType={1}/>
                            </View>}
                    </View>
                </ScrollView>
                <Indicator isVisible={part.indicatorVisible} message={part.indicatorMessage}/>
            </View>
        );
    }
}

class IndexRatioItem extends Component {
    render() {
        return (
            <View style={styles.IndexRatioItemView}>
                <View style={[styles.blockView,{backgroundColor:'#558ed5'}]}></View>
                <Text style={{paddingRight:30}}>移动</Text>
                <View style={[styles.blockView,{backgroundColor:'#4bacc6'}]}></View>
                <Text style={{paddingRight:30}}>联通</Text>
                <View style={[styles.blockView,{backgroundColor:'#c0504d'}]}></View>
                <Text style={{paddingRight:30}}>电信</Text>
            </View>
        );
    }
}

class IndexHeader extends Component {
    render() {
        return (
            <View style={styles.IndexHeaderView}>
                <View style={{flexDirection:'column',justifyContent: 'space-between', }}>
                    <Text style={styles.IndexHeaderTitle}>{this.props.title}</Text>
                    <View style={{flexDirection:'row'}}>
                        <Text>到达值 : </Text>
                        <Text style={styles.IndexHeaderValue}>{this.props.value}</Text>
                    </View>
                </View>
                <View style={[styles.IndexHeaderRatioView,]}>
                   {/* <MaterialIcon name={this.props.ratio > 0 ? 'arrow-upward' : 'arrow-downward'} size={14}
                                  color={Style.color.white}/>*/}
                    <Text>同比增幅</Text>
                    <Text style={styles.IndexHeaderRatioValue}>{Math.abs(this.props.ratio)}%</Text>
                </View>
            </View>
        );
    }
}

class RadioItem extends Component{
    constructor(props){
        super(props)
        this.state={
            visiable:false,
        }
    }
    _change(visiable){
            this.setState({
                visiable:visiable == true?false:true,
            })
    }
    render(){
        return(
            <View>
                <View style={{flexDirection:'row',height:Style.css.titleHeight,alignItems:'center',}}>
                    <Text style={{color:Style.color.black,width:'30%',textAlign:'center'}}>{this.props.title }</Text>
                    <View style={{flexDirection:'column',width:'60%', justifyContent:'center'}}>
                        <View style={{flexDirection:'row'}}>
                            <View style={[{backgroundColor:'#558ed5',width:`${this.props.cmc}%`},styles.radioView,styles.radioLeft]}/>
                            <View style={{backgroundColor:'#4bacc6',width:`${this.props.cuc}%`}}/>
                            <View style={[{backgroundColor:'#c0504d',width:`${this.props.ctc}%`},styles.radioView,styles.radioRight]}/>
                        </View>
                        <View style={{flexDirection:'row'}}>
                            <Text style={{color:'#558ed5',width:`${this.props.cmc}%`,textAlign:'center'}}>{this.props.cmc}%</Text>
                            <Text style={{color:'#4bacc6',width:`${this.props.cuc}%`,textAlign:'center'}}>{this.props.cuc}%</Text>
                            <Text style={{color:'#c0504d',width:`${this.props.ctc}%`,textAlign:'center'}}>{this.props.ctc}%</Text>
                        </View>
                    </View>
                    <TouchableOpacity style={{width:'10%',justifyContent:'center',alignItems:'center'}} onPress={()=>this._change(this.state.visiable)}>
                        <ChoseIcon name={"angle-down"} size={18} color={Style.color.gray}/>
                    </TouchableOpacity>
                </View>
                {
                    this.state.visiable == true?
                        <View style={{backgroundColor:Style.color.heightGray,marginRight:20,marginLeft:20}}>
                            <Echarts option={this.props.option} height={180}  width={Dimensions.get('window').width}/>
                        </View>
                        :
                        null
                }
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Style.color.screen
    },
    ConditionView: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingLeft: 20,
        paddingRight: 20,
        height:Style.css.titleHeight,
        borderBottomWidth:1,
        borderColor:Style.color.lightGray,
        borderStyle:'dotted',
        backgroundColor: Style.color.white,
    },
    ConditionIndexView: {
        flex: 1,
        marginHorizontal: 8,
        padding: 5,
        borderWidth: 1,
        borderColor: Style.color.lightGray,
        alignItems: 'center'
    },
    ConditionIndexTitle: {
        fontSize: Style.fontSize.normal, paddingLeft:20,
    },
    IndexRatioView: {
        backgroundColor: Style.color.white,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        paddingVertical: 10
    },
    IndexHeaderView: {
        flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between',
        backgroundColor: Style.color.white, padding: 10, marginTop: 10,
    },
    IndexHeaderTitle: {
        fontSize: Style.fontSize.normal, color: Style.color.black
    },
    IndexHeaderValue: {
        fontSize: Style.fontSize.small, color: Style.color.blue
    },
    IndexHeaderRatioView: {
        flexDirection: 'column', paddingHorizontal: 10,
    },
    IndexHeaderRatioValue: {
        fontSize: Style.fontSize.small, color: Style.color.lightRed
    },
    IndexRatioItemView: {
      alignItems: 'center',flexDirection:'row'
    },
    EchartsLineView: {
        backgroundColor: Style.color.white, borderColor: Style.color.lightGray, borderTopWidth: 1
    },
    blockView:{
        height:10,width:16,borderRadius:2,
        marginRight:15,
    },
    radioView:{
        height:10,
    },
    radioLeft:{
        borderTopLeftRadius:2,
        borderBottomLeftRadius:2,
    },
    radioRight:{
        borderTopRightRadius:2,
        borderBottomRightRadius:2,
    },
    charsTitle:{
        justifyContent:'center',alignItems:'center',
        borderBottomWidth:1,borderColor:Style.color.lightGray,borderStyle:'dotted',
        height:30,
    }
});